<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS -->
    <style>  
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        img {
            vertical-align: middle;
        }
        .lunbo{
            width: 500px;
            height: 500px;
            overflow: hidden;
            margin: 100px auto;
            border: 5px solid red;
            position: relative;
        }
        .lunboBox{
            width: 3500px;
            display: flex;
            position: relative;
            left: 0;
            transition: left 0.5s;
        }
        .lunboBox li{
            flex: 1;
        }
        .lunboBox li > img{
            width: 100%;
        }
    </style>   
    <script>
        window.onload=function(){
        class Carousel {
            constructor(lunboBoxSelector, intervalTime = 1500) {
                this.index = 0; 
                // 获取lunboBox元素
                this.lunboBox = document.querySelector(lunboBoxSelector); 
                // 定时器时间间隔
                this.intervalTime = intervalTime; 
                this.timer = null; 
                this.imageWidth = 500; 
            
                this.init(); 
            }

            // 初始化函数
            init() {
                // 启动轮播
                this.startCarousel();
                // 鼠标移入/移出事件监听
                this.addEventListeners();
            }

            // 启动定时器
            startCarousel() {
                this.timer = setInterval(() => this.move(), this.intervalTime);
            }

            move() {
                this.index++;
                if (this.index === 6) this.index = 0;
                this.lunboBox.style.left = -this.imageWidth * this.index + 'px';
            }

            // 清除定时器
            stopCarousel() {
                clearInterval(this.timer);
            }

            // 鼠标事件监听
            addEventListeners() {
                this.lunboBox.addEventListener('mouseenter', () => {
                    this.stopCarousel();
                });

                this.lunboBox.addEventListener('mouseleave', () => {
                    this.stopCarousel(); 
                    this.startCarousel(); 
                });
            }
        }

        // 实例化Carousel
      
            let carousel = new Carousel('.lunboBox');
        }
    </script>
</head>
<body>
    <div class="lunbo">
        <ul class="lunboBox">
            <li><img src="https://i.ibb.co/DVp2PjF/1.png" alt=""></li>
            <li><img src="https://i.ibb.co/LYDFm6s/2.png" alt=""></li>
            <li><img src="https://i.ibb.co/SJM6JnJ/3.png" alt=""></li>
            <li><img src="https://i.ibb.co/gDS8sNf/4.png" alt=""></li>
            <li><img src="https://i.ibb.co/SmYRmZS/5.png" alt=""></li>
            <li><img src="https://i.ibb.co/T252XKW/6.png" alt=""></li>
            <li><img src="https://i.ibb.co/Sc44WZG/7.png" alt=""></li>
        </ul>
    </div>
</body>
</html>